import { queryNewsList } from "@/api/chkNum";
import type { LoadMoreStatus } from "@/enums/loadMore";
interface NewsItem {
  id: string;
  src: string;
  title: string;
  time: string;
  author: string;
  type: string;
  imgWidth: string;
  imgHeight: string;
  link?: string;
  video_url?: string;
  youtubeId?: string;
  video_cover?: string;
  add_username?: string;
  content?: string;
}

const useLotNewsLive = defineStore("news-live", () => {
  const router = useRouter();
  const route = useRoute();
  const lotNewsList = ref<any[]>([]);
  const lckNewsList = ref<any[]>([]);
  const loadLotNewsState = ref<LoadMoreStatus>("loadmore");
  const loadLckNewsState = ref<LoadMoreStatus>("loadmore");
  const totalLotNews = ref(0);
  const totalLckNews = ref(0);
  const active = ref<number>(0);
  const params = reactive<{
    page: number;
    size: number;
    tag: string;
    // id: string | number;
  }>({
    page: 1,
    size: 20,
    tag: ""
    // id: route.params.id as string
  });
  function setActive(index: number = 0) {
    active.value = index;
  }
  function resetNewsLive() {
    params.page = 1;
    params.tag = "";
    // active.value = 0;
    lotNewsList.value = [];
    lckNewsList.value = [];
    totalLotNews.value = 0;
    totalLckNews.value = 0;
    loadLotNewsState.value = "loadmore";
    loadLckNewsState.value = "loadmore";
  }

  const mapNewsItem = (item: any): NewsItem => ({
    id: item.id,
    src: item.img_url,
    title: item.title,
    time: item.publish_time,
    author: item.publisher,
    type: item.is_video === 1 ? "video" : "news",
    // type: "video",
    imgWidth: "100%",
    imgHeight: "auto"
    // link: item.video_url,
    // 视频页面使用
    // video_url: item.video_url,
    // youtubeId: item?.video_url?.match(/v=([^&]+)/)?.[1] || "",
    // video_cover: item.img_url,
    // add_username: item.publish_time,
    // content: item.content
  });

  async function fetchLotNews(type: number | string) {
    const res = await queryNewsList(params);
    const list = (res?.data?.list ?? []).map(mapNewsItem);

    const targetList = type === 0 ? lotNewsList : lckNewsList;
    const total = type === 0 ? totalLotNews : totalLckNews;
    const loadState = type === 0 ? loadLotNewsState : loadLckNewsState;

    const id = route.params.id as string;
    if (id) {
      const filteredList = list.filter((item: { id: string }) => item.id != id);
      targetList.value = unref(targetList).concat(filteredList);
    } else {
      targetList.value = unref(targetList).concat(list);
    }

    total.value = params.page === 1 ? res.data.total : total.value;
    loadState.value =
      unref(targetList).length >= total.value ? "nomore" : "loadmore";
  }

  function fetchDataByType(type: number | string) {
    const targetList = type === 0 ? lotNewsList : lckNewsList;
    if (unref(targetList).length) return;
    unref(params).tag = type === 1 ? "lucky_number" : "";
    fetchLotNews(type);
  }

  const loadMoreNews = (type: number | string) => {
    return () => {
      const loadState: Ref<LoadMoreStatus> =
        type === 0 ? loadLotNewsState : loadLckNewsState;
      if (loadState.value === "loadmore") {
        loadState.value = "loading";
        params.page++;
        fetchLotNews(type);
      }
    };
  };

  return {
    active,
    setActive,
    resetNewsLive,
    route,
    router,
    params,
    lotNewsList,
    lckNewsList,
    loadLotNewsState,
    loadLckNewsState,
    fetchDataByType,
    loadMoreNews,
    fetchLotNews
  };
});
export const useLotNewsLiveRefs = () => storeToRefs(useLotNewsLive());
export default useLotNewsLive;
